<template>
	<basic-container>
		<el-button type="primary" @click="$refs.flow.addNode('测试节点')">添加节点</el-button>
		<el-button type="primary" @click="handleNext">下一个节点</el-button>
		<br /><br />
		<avue-flow :height="600" :width="1200" ref="flow" :option="option" v-model="form">
			<template slot-scope="scope" slot="header">
				<i class="el-icon-delete" @click="$refs.flow.deleteNode(scope.node.id)"></i>
				自定义头部
			</template>
		</avue-flow>
	</basic-container>
</template>

<script>
export default {
   data() {
      return {
        count: 0,
        form: '',
        option: {
          "name": "流程A",
          "nodeList": [
            {
              "id": "nodeA",
              "name": "流程A-节点A",
              "left": 39,
              "top": 110,
            },
            {
              "id": "nodeB",
              "name": "流程A-节点B",
              "left": 340,
              "top": 161,
            },
            {
              "id": "nodeC",
              "name": "流程A-节点C",
              "left": 739,
              "top": 161,
            },
            {
              "id": "nodeD",
              "name": "节点D",
              "left": 739,
              "top": 20,
            }
          ],
          "lineList": [
            {
              "from": "nodeA",
              "to": "nodeB"
            },
            {
              "from": "nodeB",
              "to": "nodeC"
            },
            {
              "from": "nodeC",
              "to": "nodeD"
            }
          ]
        }
      }
    },
    computed: {
      nodeList() {
        return this.option.nodeList
      }
    },
    mounted() {
      this.form = this.nodeList[this.count].id;
    },
    methods: {
      handleClick(node) {
        this.$message.success(JSON.stringify(node))
      },
      handleNext() {
        this.count++
        if (this.count >= this.nodeList.length) {
          this.count = 0;
        }
        this.form = this.nodeList[this.count].id;
      }
    }
}
</script>

<style>
</style>